<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card>
            <el-form label-position="right" label-width="110px" :model="formLabelAlign" style="max-width: 600px">
                <el-form-item label="现金账户：">
                    <span class="money">￥2600</span>
                    <el-button type="primary" link>充值记录</el-button>
                </el-form-item>
                <el-form-item label="充值方式：">
                    <radiobutton :data="applyMode" v-model="formLabelAlign.region" width="92"></radiobutton>
                </el-form-item>
                <el-form-item label="充值金额(￥)：">
                    <el-input v-model="formLabelAlign.applyMoney" style="width: 160px; margin-right: 20px" placeholder="请输入正确金额" />
                    <span class="formItemTip">实时到账</span>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="openApplyDialo">下一步</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-dialog v-model="dialogVisible" title="充值" width="500">
            <div class="rechargeBox">
                <div class="rechargeType">
                    <img src="@/assets/image/WX.png" v-if="formLabelAlign.region == '1'" alt="" srcset="" />
                    <img src="@/assets/image/ZFB.png" v-else alt="" srcset="" />
                    <div>
                        <div class="applyType">{{ formLabelAlign.region == "1" ? "微信" : "支付宝" }}支付</div>
                        <div class="applyTypeTip">使用微信扫码支付</div>
                    </div>
                </div>
                <img src="" alt="充值二维码" srcset="" class="applyCoe" />
                <div class="phonesTip">
                    <div>打开手机端{{ formLabelAlign.region == "1" ? "微信" : "支付宝" }}</div>
                    <div>扫一扫继续付款</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
const activeName = "first";
const formLabelAlign = reactive({
    region: "1",
    applyMoney: "",
});
const applyMode = reactive([
    {
        label: "微信支付",
        value: "1",
    },
    {
        label: "支付宝支付",
        value: "2",
    },
    {
        label: "银行卡支付",
        value: "3",
    },
]);
const dialogVisible = ref(false);
const openApplyDialo = () => {
    if (!formLabelAlign.applyMoney) {
        ElMessage.error("请填写要充值的金额");
        return;
    }
    if (formLabelAlign.region < "3") {
        dialogVisible.value = true;
    }
};
</script>
<style scoped lang="scss">
.formItemTip {
    font-size: 12px;
    color: #999999;
}
.money {
    font-weight: 600;
    font-size: 14px;
    color: #000000;
    margin-right: 30px;
}
.rechargeBox {
    .rechargeType {
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            height: 44px;
            margin-right: 10px;
        }
        .applyType {
            color: #333333;
            font-size: 16px;
        }
        .applyTypeTip {
            font-size: 12px;
            color: #666666;
        }
    }
    .applyCoe {
        width: 222px;
        height: 222px;
        margin: 30px 0;
        border-radius: 5px;
        border: 1px solid #dedede;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .phonesTip {
        div {
            text-align: center;
            color: #666666;
        }
    }
}
</style>
